<template>  
  <div class="todo-list-container">  
    <h2>Todo List</h2>  
    <div class="input-group">  
      <input type="text" v-model="newItem" placeholder="输入待办事项" @keyup.enter="addTodo" />  
      <button @click="addTodo" class="add-btn">添加</button>  
    </div>  
    <ul>  
      <li v-for="(todo, index) in todos" :key="index">  
        <input type="checkbox" v-model="todo.done" />  
        <span :class="{ 'done-text': todo.done }">{{ todo.text }}</span>  
        <button @click="removeTodo(index)" class="delete-btn">删除</button>  
      </li>  
    </ul>  
  </div>  
</template>
  
<script>  
import { ref, onMounted } from 'vue';  
  
export default {  
  setup() {  
    const newItem = ref('');  
    const todos = ref([]);  
  
    const addTodo = () => {  
      if (newItem.value.trim()) {  
        todos.value.push({ text: newItem.value, done: false });  
        newItem.value = '';  
        saveTodosToLocalStorage();  
      }  
    };  
  
    const removeTodo = (index) => {  
      todos.value = todos.value.filter((_, i) => i !== index);  
      saveTodosToLocalStorage();  
    };  
  
    const loadTodosFromLocalStorage = () => {  
      const savedTodos = localStorage.getItem('todos');  
      try {  
        if (savedTodos) {  
          todos.value = JSON.parse(savedTodos);  
        }  
      } catch (error) {  
        console.error('Error parsing todos from local storage:', error);  
      }  
    };  
  
    const saveTodosToLocalStorage = () => {  
      localStorage.setItem('todos', JSON.stringify(todos.value));  
    };  
  
    onMounted(loadTodosFromLocalStorage);  
  
    return {  
      newItem,  
      todos,  
      addTodo,  
      removeTodo,  
    };  
  },  
};  
</script>  
<style scoped>   
* {  
  box-sizing: border-box;  
}  
  
body {  
  font-family: 'Arial', sans-serif;  
}  
  
.todo-list-container {  
  max-width: 400px;  
  margin: 0 auto;  
  padding: 20px; 
}  
  
h2 {  
  text-align: center;  
  margin-bottom: 20px;  
}  
.input-group {  
  display: flex;  
  align-items: center;  
  margin-bottom: 10px;  
}  
  
input[type="text"] {  
  flex: 1;  
  padding: 5px;  
  border: 1px solid #ccc;  
  border-radius: 4px;  
  margin-right: 10px;  
}  
  
button {  
  padding: 5px 10px;  
  background-color: #4CAF50;  
  color: white;  
  border: none;  
  border-radius: 4px;  
  cursor: pointer;  
}  
  
button:hover {  
  background-color: #45a049;  
}  
   
ul {  
  list-style-type: none;  
  padding: 0;  
  margin: 0;  
}  
  
li {  
  display: flex;  
  align-items: center;  
  margin-bottom: 10px;  
}  
  
li input[type="checkbox"] {  
  margin-right: 10px;  
}  
  
.done-text {  
  text-decoration: line-through;  
  color: #999;  
}  
   
.delete-btn {  
  background-color: #f44336;  
  color: white;  
  border: none;  
  border-radius: 4px;  
  padding: 2px 5px;  
  margin-left: 10px;  
  cursor: pointer;  
}  
  
.delete-btn:hover {  
  background-color: #d32f2f;  
}  
</style>